<script>
  import { tweened } from "svelte/motion"
  import { cubicOut } from "svelte/easing"

  const progress = tweened(0, {
    duration: 400,
    easing: cubicOut,
  })
</script>

<div class="grid items-center w-full gap-5 p-5 my-5 text-pink-600 m-5">
  <div class="mt-2 bg-gray-400 rounded-full shadow-inner">
    <!-- <div
      class="text-center rounded-full shadow-inner"
      style="width:{$progress * 100}%; background: linear-gradient(45deg,#1fe6ff,#673AB7)"> -->
    <div
      class="text-center transition duration-500 ease-in-out rounded-full shadow-inner opacity-75"
      style="width:{$progress *
        100}%; background: linear-gradient(45deg,#ffee54,#33ff00,#ff00ca)"
    >
      <div
        class="inline-block h-full px-2 font-bold text-white bg-purple-700 rounded-full"
      >
        {$progress * 100}%
      </div>
    </div>
  </div>
  <meter value={$progress} class="w-auto text-purple-700" />
  <progress
    value={$progress}
    class="inline-block w-full text-sm text-white bg-purple-700 rounded-full"
  />
  <div class="grid justify-around w-full grid-flow-col gap-10">
    <button class="btn-blue btn" on:click={() => progress.set(0)}>0%</button>

    <button class="btn-blue btn" on:click={() => progress.set(0.25)}>
      25%
    </button>

    <button class="btn-blue btn" on:click={() => progress.set(0.5)}>50%</button>

    <button class="btn-blue btn" on:click={() => progress.set(0.75)}>
      75%
    </button>

    <button class="btn-gray btn" on:click={() => progress.set(1)}>100%</button>
  </div>
</div>

<style>
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }

  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-green-700;
  }

  .btn-gray {
    @apply bg-gray-400 text-gray-800;
  }
  .btn-gray:hover {
    @apply bg-gray-500;
  }
</style>
